<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tinycem演示1</title>
</head>
<body>
<div class="container-fluid">
    <div class="row text-center">
        <div class="col-md-12 text-center">
            <h1>Requirejs 组件库</h1>
            <p>不带有菜单栏渲染</p>
            <p>
                <a href="index.html" class="btn btn-success">返回上一页</a>
                <a href="tinymce2.html" class="btn btn-success">查看演示2</a>
            </p>
        </div>
    </div>
</div>
<div class="container">
    <div class="row row-span-3">
        <div class="col-md-12">
            <div id="edit" style="height: 500px;">Hello Orangbus</div>
        </div>
        <div class="col-md-12 mt-3 text-center">
            <button class="btn btn-primary" id="setVal">插入变量</button>
            <button class="btn btn-primary" id="getContent">获取内容</button>
            <p>doc: <a href="https://ld246.com/article/1549638745630#options-upload">文档地址</a></p>
        </div>
    </div>
</div>

<script src="js/require.js"></script>
<script src="js/main.js"></script>
<script>
    // 鼠标特效 + bootstrap
    requirejs(["cursor",'bootstrap4']);

    requirejs(["tinymce"],function () {
        tinymce.init({
            selector: '#edit',
            // 手机模式
            mobile: {
                menubar: false
            },
            menubar:false, // 是否显示菜单栏
            weight: "100%",
            height: "500px",
            placeholder: '请输入内容',
            language:'zh_CN',//注意大小写
            language_url : 'js/src/tinymce/langs/zh_CN.js',
            statusbar: false, //编辑器底部隐藏状态栏
            plugins: 'toc print preview clearhtml searchreplace autolink layout fullscreen image upfile link media code codesample table charmap hr pagebreak nonbreaking anchor advlist lists textpattern help emoticons autosave bdmap indent2em lineheight formatpainter axupimgs powerpaste letterspacing imagetools quickbars attachment wordcount autoresize importword',
            // 选项分组
            toolbar_groups: {
                formatting: {
                    text: '文字格式',
                    tooltip: 'Formatting',
                    items: 'bold italic underline | superscript subscript',
                },
                alignment: {
                    icon: 'align-left',
                    tooltip: 'alignment',
                    items: 'alignleft aligncenter alignright alignjustify',
                }
            },
            toolbar: ['|toc code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough link alignment indent2em outdent indent lineheight letterspacing bullist numlist blockquote subscript superscript  layout removeformat table image media upfile attachment importword charmap  hr pagebreak  clearhtml  bdmap  formatpainter  cut copy undo redo restoredraft  searchreplace fullscreen help'],
            contextmenu: "copy cut link", //右键操作
            quickbars_insert_toolbar: 'h1 h2 h3 h4  quickimage quicktable', // 快捷插入，比如换行后
            quickbars_selection_toolbar: 'bold quicklink h2 h3 blockquote italic | forecolor', // 选择后快捷插座

            branding: false, //（隐藏右下角技术支持）
            table_style_by_css: true,
            OperationManualHtml: '',
            CommonProblemHtml: '',
            fixed_toolbar_container:'#tinymce-app .toolbar',
            custom_ui_selector: '#tinymce-app',
            file_picker_types: 'file',
            powerpaste_word_import: "clean", // 是否保留word粘贴样式  clean | merge
            powerpaste_html_import: 'clean', // propmt, merge, clean
            powerpaste_allow_local_images: true,//
            powerpaste_keep_unsupported_src:true,
            paste_data_images: true,
            toolbar_sticky: false,
            autosave_ask_before_unload: false,
            fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
            font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
            // images_upload_base_path: '',
            images_upload_url: 'postAcceptor.php', //文件上传地址
            images_upload_handler: function (blobInfo, succFun, failFun) {//自定义插入图片函数  blobInfo: 本地图片blob对象, succFun(url|string)： 成功回调（插入图片链接到文本中）, failFun(string)：失败回调
                var file = blobInfo.blob();
                var reader = new FileReader();
                reader.onload = function(e){
                    console.log("文件回调信息:")
                    console.log(e.target)
                    succFun(e.target.result) // 文件上传成功
                    failFun("假设文件上传失败");
                }
                reader.readAsDataURL(file)
            },
            file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数
                var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', filetype);
                input.click();
                input.onchange = function () {
                    var file = this.files[0];
                    var data = new FormData();
                    data.append("file", file);
                    $.ajax({
                        data: data,
                        type: 'GET',
                        url: './api/file.json',
                        header:{'Content-Type':'multipart/form-data'},
                        cache: false,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        xhr: xhrOnProgress(function (e) {
                            const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
                            // console.log(percent);
                            progressCallback(percent);

                        }),
                    }).then(function (data) {
                        if ( data.code== 200) {
                            succFun(data.data,{ text: data.data });
                        }
                    }).fail(function (error) {
                        failFun('上传失败:' + error.message)
                    });
                }
            },
            file_callback: function (file, succFun) { //文件上传  file:文件对象 succFun(url|string,obj) 成功回调
                var data = new FormData();
                data.append("file", file);
                $.ajax({
                    data: data,
                    type: 'GET',
                    url: './api/file.json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    header:{'Content-Type':'multipart/form-data'},
                    dataType: 'json',
                    xhr: xhrOnProgress(function (e) {
                        const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
                        progressCallback(percent);
                    }),
                }).then(function (data) {
                    if ( data.code== 200) {
                        succFun(data.data,{text: file.name});
                    }
                }).fail(function (error) {
                    // failFun('上传失败:' + error.message)
                });
            },
            attachment_assets_path: './plugins/attachment/icons',
            attachment_upload_handler: function (file, succFun, failFun, progressCallback) {
                var data = new FormData();
                data.append("file", file);
                $.ajax({
                    data: data,
                    type: 'GET',
                    url: './api/file.json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    header:{'Content-Type':'multipart/form-data'},
                    dataType: 'json',
                    xhr: xhrOnProgress(function (e) {
                        const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
                        progressCallback(percent);
                    }),
                }).then(function (data) {
                    if ( data.code== 200) {
                        succFun(data.data);
                    } else {
                        failFun('上传失败:' + data.data);
                    }
                }).fail(function (error) {
                    failFun('上传失败:' + error.message)
                });
            },
            init_instance_callback: function(editor){
                $('#tinymce-app').fadeIn(1000);
                //    editor.execCommand('selectAll');
                //    editor.selection.getRng().collapse(false);
                //    editor.focus();
            }
        });

        // 插入变量
        $("#setVal").click(function() {

        });

        // 获取内容
        $("#getContent").click(function() {

        });

    });
</script>
</body>
</html>
